<template>
  <div class="app-container">
    <el-form :model="formData" label-width="160px" label-position="left">
      <el-form-item label="所属省">
        <el-select v-model="formData.provinceId" placeholder="请选择" @change="provinceChange">
          <el-option v-for="item in provinceList" :key="item.regionId" :label="item.regionName" :value="item.regionId">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="所属市">
        <el-select v-model="formData.cityId" placeholder="请选择" @change="cityChange">
          <el-option v-for="item in cityList" :key="item.regionId" :label="item.regionName" :value="item.regionId">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="所属区县">
        <el-select v-model="formData.districtId" placeholder="请选择">
          <el-option v-for="item in districtList" :key="item.regionId" :label="item.regionName" :value="item.regionId"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="大学类型">
        <el-select v-model="formData.type" placeholder="请选择">
          <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="大学性质">
        <el-select v-model="formData.nature" placeholder="请选择">
          <el-option v-for="item in natureList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="大学名称">
        <el-input v-model="formData.name"></el-input>
      </el-form-item>
      <el-form-item label="大学代码">
        <el-input v-model="formData.code"></el-input>
      </el-form-item>
      <el-form-item label="大学联系电话">
        <el-input v-model="formData.telephone"></el-input>
      </el-form-item>
      <el-form-item label="大学官网">
        <el-input v-model="formData.website"></el-input>
      </el-form-item>
      <el-form-item label="大学地址">
        <el-input v-model="formData.address"></el-input>
      </el-form-item>
      <el-form-item label="大学logo">
        <el-row>
          <el-col :span="3">
            <el-upload :data="uploadData" :action="uploadUrl" accept="image/jpeg,image/png" :multiple="false" :on-success="logoUploadSuccess">
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
          </el-col>
          <el-col :span="2">
            <el-image style="width: 100px; height: 100px" :src="logoPicUrl" fit="contain"></el-image>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="大学展示标签">
        <el-select multiple v-model="formData.labels" placeholder="请选择">
          <el-option v-for="item in labelList" :key="item.labelId" :label="item.labelName" :value="item.labelId" />
        </el-select>
      </el-form-item>
      <el-form-item label="大学简介">
        <Tinymce v-model="formData.introduction" :height="200" />
      </el-form-item>
    </el-form>
    <div class="submit-box">
      <el-button type="primary" :loading="loading" style="width: 200px;" @click.native.prevent="doSubmit">提交</el-button>
    </div>
  </div>
</template>

<script>
  import Tinymce from "@/components/Tinymce"
  import {
    getDetail, edit
  } from "@/api/university"
  import {
    getAll as getAllLabel
  } from "@/api/label"
  import {
    errorMsg,
    successMsg
  } from "@/utils/my"
  import {
    getChildren
  } from '@/api/region';


  export default {
    components: {
      Tinymce
    },

    data() {
      return {
        loading: false,
        formData: {
          id: 0,
          provinceId: '',
          cityId: '',
          districtId: '',
          type: 1,
          nature: 1,
          isShowIndex: 0,
          isShowData: 0,
          isHot: 0,
          logoPic: '',
          bannerPic: '',
          name: '',
          code: '',
          introduction: '',
          telephone: '',
          address: '',
          website: '',
          labels: []
        },
        provinceList: [],
        cityList: [],
        districtList: [],
        labelList: [],
        typeList: [
          {id: 1, name: '本科'},
          {id: 2, name: '专科'}
        ],
        natureList: [
          {id: 1, name: '公办'},
          {id: 2, name: '民办'}
        ],
        regionReqData: {
          parentId: 0,
          level: 1
        },
        uploadData: {
          fileType: 'images'
        },
        uploadUrl: 'http://www.zhaobanzhilian.com/api/upload',
        serverUrl: 'http://www.zhaobanzhilian.com',
        logoPicUrl: ''
      }
    },

    created() {
      this.formData.id = this.$route.params.id
      this.fetchRegionData()
      this.fetchUniversityLabelData()
      this.fetchData()
    },

    methods: {

      fetchData() {
        const that = this
        getDetail({id: that.formData.id}).then(res => {
          that.formData.provinceId = res.data.universityProvinceId
          that.formData.cityId = res.data.universityCityId
          that.formData.districtId = res.data.universityDistrictId
          that.formData.name = res.data.universityName
          that.formData.type = res.data.universityType
          that.formData.nature = res.data.universityNature
          that.formData.logoPic = res.data.universityLogoPic
          that.formData.code = res.data.universityCode
          that.formData.introduction = res.data.universityIntroduction
          that.formData.telephone = res.data.universityTelephone
          that.formData.address = res.data.universityAddress
          that.formData.website = res.data.universityWebsite

          that.logoPicUrl = that.serverUrl + res.data.universityLogoPic

          let labels = res.data.universityLabels
          for (let i = 0; i < labels.length; i++) {
            that.formData.labels.push(labels[i].labelId)
          }

          getChildren({parentId: res.data.universityProvinceId}).then(res => {
            that.cityList = res.data
          })

          getChildren({parentId: res.data.universityCityId}).then(res => {
            that.districtList = res.data
          })
        })
      },

      doSubmit() {
        const that = this
        let d = JSON.parse(JSON.stringify(that.formData))
        if (d.provinceId.length <= 0) {
          return errorMsg("请选择省")
        }
        if (d.cityId.length <= 0) {
          return errorMsg("请选择市")
        }
        if (d.type.length <= 0) {
          return errorMsg("请选择大学类型")
        }
        if (d.nature.length <= 0) {
          return errorMsg("请选择大学性质")
        }
        if (d.name.length <= 0) {
          return errorMsg("请输入大学名称")
        }
        if (d.code.length <= 0) {
          return errorMsg("请输入大学代码")
        }
        if (d.logoPic.length <= 0) {
          return errorMsg("请上传大学logo")
        }

        d.provinceId = d.provinceId.length <= 0 ? 0 : parseInt(d.provinceId)
        d.cityId = d.cityId.length <= 0 ? 0 : parseInt(d.cityId)
        d.districtId = d.districtId.length <= 0 ? 0 : parseInt(d.districtId)

        that.loading = true
        edit(d).then(res => {
          that.loading = false
          if (res.code != 20000) {
            return errorMsg(res.message)
          }
          successMsg(res.message)
          setTimeout(function() {
            that.$router.push({
              path: "/admin/university/list"
            })
          }, 1000)
        })
      },

      logoUploadSuccess(res) {
        this.formData.logoPic = res.data.url
        this.logoPicUrl = this.serverUrl + res.data.url
      },

      fetchUniversityLabelData() {
        const that = this
        getAllLabel().then(res => {
          that.labelList = res.data
        })
      },

      fetchRegionData() {
        const that = this
        getChildren(that.regionReqData).then(res => {
          if (res.code != 20000) {
            return errorMsg(res.message)
          }
          if (that.regionReqData.level == 1) {
            that.provinceList = res.data
          } else if (that.regionReqData.level == 2) {
            that.cityList = res.data
          } else if (that.regionReqData.level == 3) {
            that.districtList = res.data
          }
        })
      },

      provinceChange(id) {
        this.regionReqData.parentId = id
        this.regionReqData.level = 2
        this.fetchRegionData()
        this.formData.cityId = ''
        this.formData.districtId = ''
      },

      cityChange(id) {
        this.regionReqData.parentId = id
        this.regionReqData.level = 3
        this.fetchRegionData()
        this.formData.districtId = ''
      }
    }
  }
</script>

<style>
  .submit-box {
    height: 50px;
    line-height: 50px;
    text-align: center;
    padding-right: 20px;
  }
</style>
